<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    class="contact-form-validated contact-one__form"
  >
    <div class="row">
      <div class="col-md-4">
        <el-form-item prop="province">
          <el-select
            v-model="ruleForm.province"
            @change="handleProvinceChange"
            placeholder="请选择省份"
          >
            <el-option
              v-for="item in ps"
              :key="item.id"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="col-md-4">
        <el-form-item prop="city">
          <el-select
            v-model="ruleForm.city"
            @change="handleCityChange"
            placeholder="请选择城市"
          >
            <el-option
              v-for="item in citis"
              :key="item.id"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="col-md-4">
        <el-form-item prop="area">
          <el-select v-model="ruleForm.area" placeholder="请选择地区">
            <el-option
              v-for="item in areas"
              :key="item.id"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <el-form-item prop="streets">
          <input
            type="text"
            name="address"
            class="form-control"
            v-model="ruleForm.streets"
            @change="handleStreetChange()"
            placeholder="请输入街道地址"
          />
        </el-form-item>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <input type="checkbox" id="shipDetails" v-model="checked" />
        <label for="shipDetails">保存我的位置信息以便日后使用</label>
      </div>
    </div>
  </el-form>
</template>

<style scoped>
/* deep & >>> */
.el-select {
  display: flex;
  position: relative;
}
</style>>

<script>
import PCAS from "./pcas";
// const KEY_LOCATION = "BANDEER_CITY_LOCATION";
// const KEY_LOCATION_REMEMBER = "BANDEER_CITY_LOCATION_REMEMBER";
export default {
  name: "AddressForm",
  data() {
    return {
      ps: null,
      KEY_LOCATION: "BANDEER_CITY_LOCATION",
      KEY_LOCATION_REMEMBER: "BANDEER_CITY_LOCATION_REMEMBER",
      ruleForm: {
        province: null,
        city: null,
        area: null,
        streets: null,
        isDefault: null,
      },
      rules: {
        province: [
          { required: true, message: "请选择省份", trigger: "change" },
        ],
        city: [{ required: true, message: "请选择城市", trigger: "change" }],
        area: [{ required: true, message: "请选择区", trigger: "change" }],
        streets: [{ required: true, message: "请填写街道", trigger: "blur" }],
      },
      citis: null,
      areas: null,
      address: null,
      checked: true,
    };
  },
  watch: {
    checked() {
      localStorage.setItem(
        this.KEY_LOCATION_REMEMBER,
        JSON.stringify(this.checked)
      );
    },
  },
  mounted() {
    this.ps = Object.keys(PCAS);
    if (JSON.parse(localStorage.getItem(this.KEY_LOCATION_REMEMBER)) != null) {
      this.checked = JSON.parse(
        localStorage.getItem(this.KEY_LOCATION_REMEMBER)
      );
    }
    if (JSON.parse(localStorage.getItem(this.KEY_LOCATION)) != null) {
      this.ruleForm = JSON.parse(localStorage.getItem(this.KEY_LOCATION));
      let o = PCAS[this.ruleForm.province];
      let c = Object.prototype.hasOwnProperty.call(o, "市辖区")
        ? o["市辖区"]
        : o;
      if (o != null) {
        this.citis = Object.keys(
          Object.prototype.hasOwnProperty.call(o, "市辖区") ? o["市辖区"] : o
        );
      }
      this.areas = c[this.ruleForm.city];
      if (!Array.isArray(this.areas)) {
        this.areas = Object.keys(this.areas);
      }
      this.$emit("getAddress", this.ruleForm);
    }
  },
  methods: {
    initForm() {
      // 初始化省份下拉框
    },
    /**
     * 处理省下拉框的变化
     */
    handleProvinceChange() {
      let p = this.ruleForm.province;
      let o = PCAS[p];
      if (o != null) {
        this.citis = Object.keys(
          Object.prototype.hasOwnProperty.call(o, "市辖区") ? o["市辖区"] : o
        );
      }
      this.ruleForm.city = null;
    },
    /**
     * 处理市下拉框的变化
     */
    handleCityChange() {
      this.ruleForm.area = null;
      // 省
      let p = this.ruleForm.province;
      let o = PCAS[p];
      // 市
      let c = Object.prototype.hasOwnProperty.call(o, "市辖区")
        ? o["市辖区"]
        : o;
      // 所选市的名称
      let k = this.ruleForm.city;
      this.areas = c[k];
      if (!Array.isArray(this.areas)) {
        this.areas = Object.keys(this.areas);
      }
    },
    // 将地址数据传到父组件
    handleStreetChange() {
      this.submitForm();
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.address = this.ruleForm;
          if (this.checked == true) {
            localStorage.setItem(
              this.KEY_LOCATION,
              JSON.stringify(this.address)
            );
          }
          this.$emit("getAddress", this.address);
          console.log(this.address);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>